<template>
	<view class="index-container">
		<view class="header-search">
			<search-com></search-com>
		</view>
		<!-- 轮播 -->
		<swiper
			class="shuffling-container"
			indicator-dots
			autoplay
			interval="5000"
			circular
		>
			<swiper-item
				class="swiper-item"
				v-for="item in swiperdata"
				:key="item.goods_id"
			>
				<navigator url=" item.navigator_url " open-type="navigate">
					<image class="" :src="item.image_src" mode="widthFix" />
				</navigator>
			</swiper-item>
		</swiper>

		<!-- 楼层分类 -->
		<view class="floor-classification-container">
			<view class="item" v-for="(item, index) in catitems" :key="index">
				<navigator :url="item.navigator_url" open-type="navigate">
					<image :src="item.image_src" class="item-image" />
				</navigator>
			</view>
		</view>

		<view class="index_floor">
			<view
				class="floor_group"
				v-for="(item, index) in floordata"
				:key="index"
			>
				<!-- 楼层标题 -->
				<view class="floor_title">
					<image mode="widthFix" :src="item.floor_title.image_src" />
				</view>
				<!-- 楼层列表 -->
				<view class="floor_list">
					<navigator v-for="(it, idx) in item.product_list" :key="idx">
						<image
							:src="it.image_src"
							:mode="idx === 0 ? 'widthFix' : 'scaleToFill'"
						/>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 楼层结束 -->
	</view>
</template>

<script>
import request from '@/utils/request.js'
	export default {
		data() {
			return {
				swiperdata: [],
				catitems: [],
				floordata: [],
			};
		},
		onLoad() {
			this.getSwiperdata()
        	this.getCatitems()
        	this.getFloordata()
		},
		methods: {
			async getSwiperdata() {
				const { message } = await request("/home/swiperdata");
				this.swiperdata = message
				// console.log(message)
			},
			async getCatitems() {
				const { message } = await request("/home/catitems");
				this.catitems = message
				console.log(message)
			},
			async getFloordata() {
				const { message } = await request("/home/floordata");
				this.floordata = message
				// console.log(message)
			},
		},
	};
</script>

<style scoped>
.index-container{
    background-color: #eee;
    min-height: 100vh;
}
.header-search{
    padding: 15rpx 30rpx;
    background-color: #ff0025;
}

.shuffling-container{
    height: calc(100vw * 340 / 750) ;
    width: 100%;
}
.shuffling-container .swiper-item{
    height: 100%;
}
.shuffling-container .swiper-item image{
    width: 100%;
}

/* 楼层分类 */
.index_floor{
	background-color: #fff;
}
.floor-classification-container{
    display: flex;
    justify-content: space-evenly;
    background-color: #fff;
    padding: 20rpx 0;
}
.floor-classification-container .item .item-image{
    width: 128rpx;
    height: 140rpx;
}

.floor_title {
    padding: 10rpx 0;
}
.floor_title image {
    width: 100%;
}
.floor_list {
    overflow: hidden;
}
.floor_list navigator {
    float: left;
    width: 33%;
}
/* 后四个超链接 */
.floor_list navigator:nth-last-child(-n+4) {
    /* 原图的宽高 232 *386 */
    height: calc(33vw * 386 / 232 / 2);
    border-left: 3rpx solid #fff;
}

/* 2 3 两个超链接 */
.floor_list navigator:nth-child(2) {
    border-bottom: 5rpx solid #fff;
}
.floor_list navigator:nth-child(3){
    border-bottom: 5rpx solid #fff;
}

.floor_list navigator image {
    width : 100%;
    height: 100%;
}

</style>
